<template>
	<view class="cartitem">
		<view class="btn">
			<CheckButton v-on:click.native="changeChecked" v-bind:isChecked="$store.state.cartList[this.index].isChecked"/>
		</view>
		<view class="l">
			<image v-bind:src="item.image"></image>
		</view>
		<view class="r">
			<view class="tit">{{item.title}}</view>
			<view class="intro">{{item.desc}}</view>
			<view class="count">
				<view class="price">{{item.price}}</view>
				<view class="sum">{{item.count}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CheckButton from '../../../components/content/checkButton/checkButton.vue'
	export default {
		components:{
			CheckButton
		},
		props:{
			item:{
				type:Object,
				default:function (){
					return{}
				}
			},
			index:{
				type:Number
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			changeChecked(){
			    this.$store.state.cartList[this.index].isChecked=!this.$store.state.cartList[this.index].isChecked
			}
		}
	}
</script>

<style scoped>
.cartitem{
    display: flex;
    height: 240rpx;
    padding-top: 20rpx;
}
.btn{
    width: 7%;
    height: 100%;
    margin-top: 80rpx;
    margin-left: 10rpx;
}
.l{
    width: 25%;
    text-align: center;
}
.l image{
    padding-top: 10rpx;
    max-width: 100%;
    max-height: 200rpx;
}
.r{
    width: 68%;
    padding: 0 20rpx;
}
.tit,.intro{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.count{
    display: flex;
}
.price{
    width: 90%;
}
.sum{
    text-align: right;
    width: 10%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
